<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>不同时间作品数</title>

    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
    // 创建 XML XMLHttpRequest 对象用于读取 CSV 文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '../output/mengBatch5.csv/part-00000-28306db3-0f22-4254-bbe8-c01adf674fb7-c000.csv', true);
    xhr.onload = function () {
        if (this.status === 200) {
            const csvData = this.responseText;
            // 解析 CSV 数据，处理可能的空格
            const rows = csvData.split('\n').map(row => row.split(',').map(item => item.trim()));
            const headers = rows[0];
            // 过滤有效数据行（确保3列完整且用户数为有效数字）
            const dataRows = rows.slice(1).filter(row => row.length === 3 && !isNaN(parseInt(row[2])));

            // 数据处理：按年龄组和设备类型分组统计
            const ageGroups = new Set(); // 收集所有年龄区间
            const deviceTypes = new Set(); // 收集所有设备类型
            const dataMap = new Map(); // 存储 {年龄组: {设备类型: 用户数}}

            dataRows.forEach(row => {
                const ageGroup = row[0];
                const deviceType = row[1];
                const userCount = parseInt(row[2]) || 0;

                // 收集唯一维度
                ageGroups.add(ageGroup);
                deviceTypes.add(deviceType);

                // 存储用户数
                if (!dataMap.has(ageGroup)) {
                    dataMap.set(ageGroup, new Map());
                }
                const deviceMap = dataMap.get(ageGroup);
                deviceMap.set(deviceType, (deviceMap.get(deviceType) || 0) + userCount);
            });

            // 转换为图表所需格式
            const ageList = Array.from(ageGroups).sort((a, b) => {
                // 按年龄区间排序（假设格式如"18-24"）
                const aNum = parseInt(a.split('-')[0]);
                const bNum = parseInt(b.split('-')[0]);
                return aNum - bNum;
            });
            const deviceList = Array.from(deviceTypes);

            // 构建系列数据：每个设备类型对应一组各年龄组的用户数
            const series = deviceList.map(device => {
                return {
                    name: device,
                    type: 'bar',
                    data: ageList.map(age => dataMap.get(age).get(device) || 0)
                };
            });

            // 初始化 ECharts 实例
            const myChart = echarts.init(document.getElementById('lineChart'));

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '不同年龄区间在各设备上的用户分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: deviceList, // 图例：设备类型
                    top: 30,
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ageList,
                    name: '年龄区间', // x轴名称：年龄区间
                    axisLabel: {
                        interval: 0 // 显示所有年龄区间
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '用户数', // y轴名称：用户数
                    min: 0 // 用户数从0开始
                },
                series: series
            };

            // 使用配置项显示图表
            myChart.setOption(option);

            // 响应窗口大小变化
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    };
    xhr.send();
</script>
</body>
</html>